<template>

    <van-dialog
            v-model="dialogShow"
            title="绑定手机号"
            :before-close="beforeClose"
            show-cancel-button
    >
        <van-field label="手机号" v-model="phone" placeholder="请输入手机号" :error-message="errormessage"/>
        <van-field
                v-model="regcaptcha"
                center
                clearable
                label="短信验证码"
                placeholder="请输入短信验证码"
        >
            <van-button slot="button" size="small" type="primary" @click="sendSms" :disabled="btnDisabled">{{ btnText
                }}
            </van-button>
        </van-field>

    </van-dialog>
</template>

<script>
    import {getLocalStorage, setLocalStorage} from "@/utils/local-storage";
    import {Toast} from "vant";
    import {authProfile, regcaptcha} from "@/api/api";

    export default {
        name: 'bindmobile',
        data() {
            return {
                dialogShow: false,
                regcaptcha: '',
                phone: '',
                isPhone: false,
                btnDisabled: false,
                btnText: '获取验证码',
                errormessage: '',

            };
        },
        created() {
            // const {mobile} = getLocalStorage('mobile');
            // if (!mobile) {
            //     this.dialogShow = true
            // }
        },
        watch: {
            phone(val) {
                //手机号验证
                var reg = /^1[3456789]\d{9}$/;
                if (val != '') {
                    if (reg.test(val)) {
                        this.isPhone = true
                        this.errormessage = ''
                    } else {
                        this.errormessage = '手机号格式不正确'
                    }
                }
            }
        },
        activated() {
            this.getLoginStatus();
        },
        methods: {
            parentHandleclick(e) {
                this.dialogShow = true
            },
            beforeClose(action, done) {
                if (action === 'cancel') {//取消按钮
                    done();
                } else if (action === 'confirm') {//确定按钮
                    if (this.phone && this.isPhone && this.regcaptcha) {
                        authProfile({
                            mobile: this.phone,
                            code: this.regcaptcha
                        }).then(res => {
                            this.dialogShow = false
                            Toast("绑定成功");
                            setLocalStorage({mobile: this.phone});
                            this.$router.go(0)
                        }).catch(error => {
                            Toast(error.data.errmsg);
                            // 阻止弹窗关闭
                            done(false)
                        });
                    } else {
                        Toast('请检查手机号和验证码');
                        // 阻止弹窗关闭
                        done(false)
                    }
                }

            },
            sendSms() {
                let that = this
                if (this.isPhone) {
                    regcaptcha({
                        mobile: this.phone
                    }
                    ).then(res => {
                        that.getSecond(60)
                    }).catch(error => {
                        Toast(error.data.errmsg);
                    });
                }else{
                    Toast('请检查手机号');
                }
            },
            getSecond(wait) {
                let _this = this;
                let _wait = wait;
                if (wait == 0) {
                    this.btnDisabled = false;
                    this.btnText = "获取验证码"
                    wait = _wait;
                } else {
                    this.btnDisabled = true;
                    this.btnText = "验证码(" + wait + "s)"
                    wait--;
                    setTimeout(function () {
                            _this.getSecond(wait);
                        },
                        1000);
                }
            },
            getLoginStatus() {
                let flag = localStorage.getItem('Authorization');
                // if (!flag) {
                //     this.dialogShow = false
                // }
                this.isLogin = !!flag
            }
        },
        mounted() {
            // alert(this.$router.query.pid)
            let test = window.location.href;
            let pid = test.split("?pid=")[1];
            if (pid) {
                // alert(pid)
                setLocalStorage({pid: pid});
            }
        },
    };
</script>

<style scoped>

</style>